<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        .animate  {
            animation-name: rotate;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-duration: 3s;
        }
        @keyframes rotate {
            0%{
                transform: rotate(0);
            }
            25%{
                transform: rotate(90deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(270deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="content animated fadeIn">
    <div class="block block-fx-shadow hide" id="queryArea">
        <div class="block-content block-content-full">
            <form class="form-inline" method="post" id="queryForm">
                <label class="sr-only" for="name">音乐名称</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">音乐名称</button>
                    </div>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="name" name="name">
                </div>
                <label class="sr-only" for="name">作者</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">作者</button>
                    </div>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="artist" name="name">
                </div>
                <label class="sr-only" for="state">状态</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary">状态</button>
                    </div>
                    <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="state" name="state">
                        <option value="">全部</option>
                        <option value="true">开启</option>
                        <option value="false">关闭</option>
                    </select>
                </div>
                <button type="button" class="btn btn-alt-primary mr-5 hexo-query-submit">提交</button>
                <button type="reset" class="btn btn-alt-warning">重置</button>
            </form>
        </div>
    </div>
    <div class="block">
        <div class="block-header block-header-default">
            <h3 class="block-title"><i class="fa fa-music"></i> 音乐列表</h3>
            <div class="block-options">
                <div class="block-options-item" id="toolbar">
                    <button type="button" class="btn btn-sm btn-secondary float-right hexo-query" data-query-area="queryArea"><i class="fa fa-search text-success mr-5"></i> 查询</button>
                    <button type="button" class="btn btn-sm btn-secondary float-right mr-5 hexo-refresh"><i class="fa fa-refresh mr-5"></i> 刷新</button>
                    <button type="button" class="btn btn-sm btn-secondary float-right mr-5 hexo-remove"><i class="fa fa-trash text-danger mr-5"></i> 删除</button>
                    <button type="button" class="btn btn-sm btn-secondary float-right mr-5 hexo-edit" title="编辑音乐" data-width="550" data-height="580" data-full="true"><i class="fa fa-edit text-warning mr-5"></i> 编辑</button>
                    <button type="button" class="btn btn-sm btn-secondary float-right mr-5 hexo-add" title="新增音乐" data-width="550" data-height="580" data-full="true"><i class="fa fa-plus-square text-primary mr-5"></i> 新增</button>
                </div>
            </div>
        </div>
        <div class="block-content">
            <div class="table-responsive">
                <table id="listTable" class="table table-striped table-vcenter">
                    <thead>
                        <tr>
                            <th class='text-center' width="5%" data-checkbox="true">
                                <label class="css-control css-control-primary css-checkbox" for="check-all" >
                                    <input type="checkbox" class="css-control-input" id="check-all">
                                    <span class="css-control-indicator"></span>
                                </label>
                            </th>
                            <th width="8%" data-field="cover" data-formatter="urlFormatter">封面</th>
                            <th data-field="name">名称</th>
                            <th data-field="artist" width="15%">作者</th>
                            <th width="5%" align="center" data-field="state" data-formatter="stateFormatter">状态</th>
                            <th width="5%" align="center" data-field="sort">排序</th>
                            <th width="10%" align="center" data-formatter="actionFormatter">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:inline="javascript">

    function switchChange($obj) {
        let id = $obj.data("id");
        let state = $obj.prop("checked");

        $.hexo.modal.confirm("确定要修改状态吗？", function() {
            $.hexo.action.sendRequest({
                url: BASE_URL + "/updateState.json",
                params: {"id": id, "state": state},
                callback: function (resp) {
                    if (resp.success) {
                        $.hexo.modal.tip("修改状态成功", "success", function () {
                            $.hexo.modal.close();
                            $.hexo.table.refreshData();
                        });
                    }
                }
            });
        }, function() {
            $.hexo.table.refreshData();
        });
    }

    function urlFormatter(val, row) {
        let className = "";
        if (window.musicObj != null && !window.musicObj.paused) {
            if (window.musicObj.getAttribute("id") == row.id) {
                className = "animate";
            }
        }
        return "<img id='cover_"+row.id+"' src='" + val + "' width='48' height='48' alt='' class='" + className + "' style='border-radius: 50%' />";
    }

    function stateFormatter(val, row) {
        let checked = val ? 'checked' : '';
        let arr = [];
        arr.push('<label class="css-control css-control-sm css-control-success css-switch">');
        arr.push('<input type="checkbox" class="css-control-input" ' + checked + ' data-id="'+row.id+'" onclick="window.switchChange($(this))">');
        arr.push('<span class="css-control-indicator"></span>');
        arr.push('</label>');
        return arr.join("");
    }

    function actionFormatter(val, row) {
        let btnArr = [];
        btnArr.push('<div class="btn-group">');
        let className = "fa fa-play";
        if (window.musicObj != null && !window.musicObj.paused) {
            if (window.musicObj.getAttribute("id") == row.id) {
                className = "fa fa-pause";
                if (window.musicObj.getAttribute("src") != row.url) {
                    window.musicObj.setAttribute("src", row.url);
                }
            }
        }
        btnArr.push('<button id="play_'+row.id+'" type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="播放音乐" data-id="'+row.id+'" data-url="'+row.url+'" onclick="window.playMusic($(this))"><i class="'+className+'"></i></button>');
        btnArr.push('<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="编辑音乐" data-width="550" data-height="580" data-full="true" onclick="$.hexo.action.showEditUI(\'' + row.id + '\', $(this))"><i class="fa fa-pencil"></i></button>');
        btnArr.push('<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" title="删除" onclick="$.hexo.action.remove(\'' + row.id + '\')"><i class="fa fa-times"></i></button>');
        btnArr.push("</div>");
        return btnArr.join("");
    }

    window.musicObj = null;

    function playMusic($obj) {
        let id = $obj.data("id");
        let url = $obj.data("url");
        if (window.musicObj == null) {
            let audio = document.createElement('audio');
            audio.setAttribute('id', id);
            audio.setAttribute('src', url);
            audio.setAttribute('autoplay', 'autoplay');
            audio.style.visibility = "hidden";
            document.body.appendChild(audio);
            window.musicObj = audio;
            $("#play_" + id).html('<i class="fa fa-pause"></i>');
            $("#cover_" + id).addClass("animate");

            window.musicObj.onended = function() {
                $("#play_" + id).html('<i class="fa fa-play"></i>');
                $("#cover_" + id).removeClass("animate");
            }

        } else {
            let oldId = window.musicObj.getAttribute("id");
            if (oldId == id) {
                if (window.musicObj.paused) {
                    window.musicObj.play();
                    $("#play_" + id).html('<i class="fa fa-pause"></i>');
                    $("#cover_" + id).addClass("animate");
                } else {
                    window.musicObj.pause();
                    $("#play_" + id).html('<i class="fa fa-play"></i>');
                    $("#cover_" + id).removeClass("animate");
                }
            } else {
                $("#play_" + oldId).html('<i class="fa fa-play"></i>');
                $("#cover_" + oldId).removeClass("animate");
                window.musicObj.setAttribute('id', id);
                window.musicObj.setAttribute('src', url);
                $("#play_" + id).html('<i class="fa fa-pause"></i>');
                $("#cover_" + id).addClass("animate");
            }
        }
    }

    $(function() {
        $.hexo.table.init({
            baseUrl: BASE_URL,
            height: $(window.parent).height() - 283
        });
    });
</script>
</body>
</html>